<template>
  <!-- 歌单容器 -->
  <div class="play-list-container">
    <!-- 歌单类别导航组件 -->
    <!--
      :styleList="songStyle" - 传递歌单类别的数据给 YinNav 组件，供导航使用。
      :activeName="activeName" - 传递当前激活的类别名称给 YinNav 组件，用于高亮显示。
      @click="handleChangeView" - 当导航栏项被点击时，触发 handleChangeView 方法。
    -->
    <ding-dong-nav :styleList="songStyle" :activeName="activeName" @click="handleChangeView"></ding-dong-nav>
    <!-- 播放列表组件 -->
    <!--
      :playList="data" - 传递当前页显示的歌单数据给 PlayList 组件。
      path="song-sheet-detail" - 传递路径给 PlayList 组件，可能用于详细页的路由。
    -->
    <play-list :playList="data" path="song-sheet-detail"></play-list>
    <!-- 分页组件 -->
    <!--
      class="pagination" - 分页组件的 CSS 类名，用于样式定义。
      background - 分页组件的背景样式设置。
      layout="total, prev, pager, next" - 分页组件的布局，显示总数、前一页、页码和下一页。
      :current-page="currentPage" - 当前页码，用于分页的显示。
      :page-size="pageSize" - 每页显示的条目数。
      :total="allPlayList.length" - 总条目数，用于计算总页数。
      @current-change="handleCurrentChange" - 页码变化时触发 handleCurrentChange 方法。
    -->
    <el-pagination
        class="pagination"
        background
        layout="total, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="allPlayList.length"
        @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref, computed} from "vue";
import DingDongNav from "@/components/layouts/DingDongNav.vue";
import PlayList from "@/components/PlayList.vue";
import {SONGSTYLE} from "@/enums";
import {HttpManager} from "@/api";


export default defineComponent({
  components: {
    DingDongNav,
    PlayList,
  },

  setup() {
    const activeName = ref("全部歌单");
    const pageSize = ref(10); // 页数
    const currentPage = ref(1); // 当前页
    const songStyle = ref(SONGSTYLE); // 歌单导航栏类别
    const allPlayList = ref([]); // 歌单

    // 当前页面的歌单数据
    const data = computed(() => allPlayList.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value));

    // 获取全部歌单
    async function getSongList() {
      allPlayList.value = ((await HttpManager.getSongList()) as ResponseBody).data;
      currentPage.value = 1;
    }

    // 通过类别获取歌单
    async function getSongListOfStyle(style) {
      allPlayList.value = ((await HttpManager.getSongListOfStyle(style)) as ResponseBody).data;
      currentPage.value = 1;
    }

    try {
      getSongList();
    } catch (error) {
      console.error(error);
    }

    // 切换歌单类别
    async function handleChangeView(item) {
      activeName.value = item.name;
      allPlayList.value = [];
      try {
        if (item.name === "全部歌单") {
          await getSongList();
        } else {
          await getSongListOfStyle(item.name);
        }
      } catch (error) {
        console.error(error);
      }
    }

    // 页码变化时的处理
    function handleCurrentChange(val) {
      currentPage.value = val;
    }

    return {
      activeName,
      songStyle,
      pageSize,
      currentPage,
      allPlayList,
      data,
      handleChangeView,
      handleCurrentChange,
    };
  },
});
</script>
